<template>
  <div class="vol-dialog">
    <el-drawer :title="title" :modal="modal" :icon="icon" v-model="vmodel" :direction="direction" :size="width"
      :before-close="handleClose">
      <el-scrollbar :max-height="contentHeight">
        <div v-if="inited" style="min-height: 50px" class="srcoll-content" :style="{ padding: padding + 'px' }">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="ssfa">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>市县实施方案</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      实施方案文件：<a style="color: blue; cursor: pointer" @click="getShowPdf('ssfa', item.ssfaFileUrl,item.ssfaName)">{{
                        item.ssfaName
                        }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：公文或副封面和技术方案二选一进行上传，文件格式必须为.pdf；文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.ssfa_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.ssfa_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane name="jcbg">
              <template #label>
                <div class="custom-tabs-label" style="padding-left: 0px; margin-left: 0px">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>任务区检查报告</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      任务区检查报告：<a style="color: blue; cursor: pointer" @click="getShowPdf('jcbg', item.jcbgFileUrl,item.jcbgName)">{{
                        item.jcbgName
                        }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.jcbg_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.jcbg_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="任务区技术总结报告" name="zjbg">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>任务区技术总结报告</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      任务区技术总结报告：<a style="color: blue; cursor: pointer" @click="getShowPdf('zjbg', item.zjbgFileUrl,item.zjbgName)">{{
                        item.zjbgName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.zjbg_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.zjbg_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="两级检查记录" name="ljjl">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>两级检查记录</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div style="width: 50%; float: left">
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div style="float: left; width: 100%">
                        <div style="width: 60%; float: left">
                          一级检查记录：
                        </div>
                        <div style="float: left; margin-left: 25px">
                          <el-radio-group v-model="item.yj_state" @change="btnCheck(item)" disabled>
                            <el-radio :label="1">审核通过</el-radio>
                            <el-radio :label="0">审核不通过</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                      <div style="float: left; width: 80%; margin-left: 80px" v-for="(model, bIndex) in item.yjjllist"
                        :key="bIndex">
                        <div style="width: 100%; float: left">
                          <a style="color: blue; cursor: pointer" @click="getShowPdf('yjjl', model.url,model.yj_file_name,bIndex)">{{
                            model.name }}</a>
                        </div>
                      </div>
                    </div>

                    <div style="font-size: 13px; color: red; clear: both">
                      说明：文件格式要求为：pdf/zip/rar,优先使用pdf格式
                    </div>
                    <div style="font-size: 13px; color: red; clear: both">
                      <p>
                        注意：一级检查记录应包括：&nbsp;&nbsp;1.DOM套合差统计表和附件资料&nbsp;2.监测要素（国家规定格式）&nbsp;3.元数据检查记录表&nbsp;4.实地照片与外业调查文件&nbsp;
                      </p>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div style="width: 90%">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.yj_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="width: 50%; float: left">
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div style="float: left; width: 100%">
                        <div style="width: 60%; float: left">
                          二级检查记录：
                        </div>
                        <div style="float: left; margin-left: 25px">
                          <el-radio-group disabled v-model="item.lj_state" @change="btnCheck(item)">
                            <el-radio :label="1">审核通过</el-radio>
                            <el-radio :label="0">审核不通过</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                      <div style="float: left; width: 80%; margin-left: 80px" v-for="(model, bIndex) in item.ljjllist"
                        :key="bIndex">
                        <div style="width: 100%; float: left">
                          <a style="color: blue; cursor: pointer" @click="getShowPdf('ljjl', model.url, model.lj_file_name,bIndex)">{{
                            model.name }}</a>
                        </div>

                      </div>
                    </div>

                    <div style="font-size: 13px; color: red; clear: both">
                      说明：文件格式要求为：pdf/zip/rar,优先使用pdf格式
                    </div>
                    <div style="font-size: 13px; color: red; clear: both">
                      <p>
                        注意：二级检查记录应包括：&nbsp;&nbsp;1.附件资料和一查检查记录表&nbsp;2.监测要素&nbsp;3.元数据检查记录表&nbsp;4.实地照片与外业调查文件
                      </p>
                    </div>
                  </div>
                </div>

                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div style="width: 90%">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.lj_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="外业调查核查记录表" name="wydcjl">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>外业调查核查记录表</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      外业调查核查记录表：<a style="color: blue; cursor: pointer"
                        @click="getShowPdf('wydcjl', item.wydcjlFileUrl,item.wydcjlName)">{{
                        item.wydcjlName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.wydcjl_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.wydcjl_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="机检记录" name="jjbg">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>机检记录</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div style="width: 50%; float: left">
                <div class="upload-container" style="width: 65%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      元数据机检记录及错误未修改说明：<a style="color: blue; cursor: pointer"
                        @click="getShowPdf('jjbg', item.jjbgFileUrl,item.jjbgName)">{{
                        item.jjbgName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.jjbg_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div style="width: 90%">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.jjbg_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="width: 50%; float: left">
                <div class="upload-container" style="width: 65%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      监测数据机检记录及错误未修改说明：<a style="color: blue; cursor: pointer"
                        @click="getShowPdf('jjbg', item.jccwwxgsmFileUrl,item.jccwwxgsmName)">{{
                        item.jccwwxgsmName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.jjbg_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div style="width: 90%">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.jjbg_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="接边记录表" name="djsjy"  v-if="ifShowPanel">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>接边记录表</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      接边记录表：<a style="color: blue; cursor: pointer" @click="getShowPdf('djsjy', item.djsjyFileUrl,item.djsjyName)">{{
                        item.djsjyName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.djsjy_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.djsjy_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="委托函" name="wth">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>委托函</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      委托函：<a style="color: blue; cursor: pointer" @click="getShowPdf('wth', item.wthFileUrl)">{{
                        item.wthName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.wth_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.wth_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane> -->
            <el-tab-pane label="抽样单" name="cyd">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>抽样单</span>
                </div>
                <div class="custom-tabs-label" style="margin-left: 30px">
                  <span>/</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      抽样单：<a style="color: blue; cursor: pointer" @click="getShowPdf('cyd', item.cydFileUrl,item.cydName)">{{
                        item.cydName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.cyd_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.cyd_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane> 
            <el-tab-pane label="测绘资料交验移交清单" name="chzlyy">
              <template #label>
                <div class="custom-tabs-label">
                  <i class="el-icon-document" :size="26">
                    <CustomIcon />
                  </i>
                  <span>测绘资料交验移交清单</span>
                </div>
              </template>
              <div>
                <div class="upload-container" style="width: 80%; float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      测绘资料交验移交清单：<a style="color: blue; cursor: pointer"
                        @click="getShowPdf('chzlyy', item.chzlyyFileUrl,item.chzlyyName)">{{
                        item.chzlyyName }}</a>
                    </div>

                    <p style="font-size: 13px; color: red; clear: ">
                      说明：文件格式必须为.pdf，文件最大不能超过10M
                    </p>
                  </div>
                </div>
                <div class="upload-container" style="float: left">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <el-radio-group v-model="item.chzlyy_state">
                        <el-radio :label="1" disabled>审核通过</el-radio>
                        <el-radio :label="0" disabled>审核不通过</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div class="upload-container" style="clear: both">
                  <div class="upload-item">
                    <div style="font-size: 13px; line-height: 32px">
                      <div>审核意见：</div>
                      <div>
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }" placeholder=""
                          v-model="item.chzlyy_shyj">
                        </el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!-- <div>
            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 10vh"
            >
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                <el-button
                  type="primary"
                  class="edit_btn"
                  @click="btnNext"
                  style="display: none"
                  >下一项</el-button
                >&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="primary" class="edit_btn" @click="btnSubmit"
                  >提交审核</el-button
                >
              </el-col>
            </el-row>
          </div> -->
        </div>
      </el-scrollbar>
    </el-drawer>

  </div>
</template>

<script>
import { defineComponent, ref, watch, reactive, h } from "vue";
import * as pdfjsLib from "pdfjs-dist";
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.js";
const data_id = ref("");
export default defineComponent({
  props: {
    modelValue: false,

    pdfUrl: {
      type: String,
      default: "",
    },
    lazy: {
      //是否开启懒加载2020.12.06
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "基本信息",
    },
    detailParams: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 200,
    },
    width: {
      type: Number,
      default: 1500,
    },
    pdfwidth: {
      type: Number,
      default: 1000,
    },
    padding: {
      type: Number,
      default: 16,
    },
    modal: {
      //是否需要遮罩层
      type: Boolean,
      default: true,
    },
    fmodal: {
      //是否需要遮罩层
      type: Boolean,
      default: true,
    },
    ifShowPanel: {
      //是否需要显示接边表
      type: Boolean,
      default: false,
    },
    draggable: {
      //启用可拖拽功能
      type: Boolean,
      default: false,
    },
    mask: {
      type: Boolean,
      default: true,
    },

    onModelClose: {
      //2021.07.11增加弹出框关闭事件
      type: Function,
      default: (iconClick) => {
        return true;
      },
    },
    fistfileName: {
      type: String,
      default: "",
    },
    fistfileUrl: {
      type: String,
      default: "",
    },
    direction: {
      type: String,
      default: "rtl",
    },
  },
  setup(props, context) {
    const item = reactive({
      ssfaName: "",
      jcbgName: "",
      zjbgName: "",
      yj_szzsyxtName: "",
      yj_jcsjcgName: "",
      yj_scysjName: "",
      yj_sdzpsjName: "",
      yj_wydcwjName: "",
      lj_szzsyxtName: "",
      lj_jcsjcgName: "",
      lj_scysjName: "",
      lj_sdzpsjName: "",
      lj_wydcwjName: "",
      wydcjlName: "",
      jjbgName: "",
      djsjyName: "",
      wthName: "",
      cydName: "",
      chzlyyName: "",
      ssfaFileUrl: "",
      jcbgFileUrl: "",
      zjbgFileUrl: "",
      yjjllist: [],
      ljjllist: [],
      lj_shyj: "",
      yj_shyj: "",
      wydcjlFileUrl: "",
      jjbgFileUrl: "",
      djsjyFileUrl: "",
      wthFileUrl: "",
      cydFileUrl: "",
      chzlyyFileUrl: "",
      radioValue: 0,
      ssfa_state: "",
      jcbg_state: "",
      zjbg_state: "",
      lj_state: "",
      yj_state: "",
      wydcjl_state: "",
      jjbg_state: "",
      djsjy_state: "",
      wth_state: "",
      cyd_state: "",
      chzlyy_state: "",
      ssfa_shyj: "",
      jcbg_shyj: "",
      zjbg_shyj: "",
      wydcjl_shyj: "",
      jjbg_shyj: "",
      jccwwxgsm_shyj: "",
      djsjy_shyj: "",
      wth_shyj: "",
      cyd_shyj: "",
      chzlyy_shyj: "",
      data_id: "",
      projectname: "",
    });

    const clientHeight = document.body.clientHeight * 0.95 - 60;
    const inited = ref(true);
    const vmodel = ref(false);
    const shyj = ref("");
    const fmodel = ref(false); //文件
    const dialogVisible = ref(false); //日期
    const selectedDate = ref(""); //选择的线下交验日期
    const footer = ref(false);
    const top = ref(100);
    vmodel.value = props.modelValue;
    footer.value = !!context.slots.footer;
    const contentHeight = ref(200);
    contentHeight.value = props.height;

    const handleClose = (done, iconClose) => {
      let result = props.onModelClose(!!iconClose);
      if (result === false) return;
      vmodel.value = false;
      context.emit("update:modelValue", false);
      done && done();
    };

    const calcHeight = (val) => {
      contentHeight.value = clientHeight - 30;
      return clientHeight / -2 + "px";
    };
    const handleClick = (tab, event) => { };

    top.value = calcHeight();
    watch(
      () => props.modelValue,
      (newVal, oldVal) => {
        vmodel.value = newVal;
      }
    );
    watch(
      () => props.height,
      (newVal, oldVal) => {
        top.value = calcHeight();
      }
    );
    watch(
      () => props.detailParams,
      (newVal, oldVal) => {
        const model = props.detailParams.thisdata;
        const shitem = props.detailParams.thisaudit;
        item.ljjllist = [];
        item.yjjllist = [];
        if (model != null) {
          item.data_id = model.id;
          item.projectname = model.projectname;
          item.ssfaName = model.ssfa_name;
          item.ssfaFileUrl = model.ssfa;
          item.jcbgName = model.jcbg_name;
          item.jcbgFileUrl = model.jcbg;
          item.zjbgName = model.zjbg_name;
          item.zjbgFileUrl = model.zjbg;
          if (shitem != null) {
            item.ssfa_shyj = shitem.ssfa_sm;
            item.ssfa_state = shitem.ssfa_sh_state;
            item.jcbg_shyj = shitem.jcbg_sm;
            item.jcbg_state = shitem.jcbg_sh_state;
            item.zjbg_shyj = shitem.zjbg_sm;
            item.zjbg_state = shitem.zjbg_sh_state;

            item.wydcjl_shyj = shitem.wydcjl_sm;
            item.wydcjl_state = shitem.wydcjl_sh_state;
            item.jjbg_shyj = shitem.jjbg_sm;
            item.jjbg_state = shitem.jjbg_sh_state;
            item.djsjy_shyj = shitem.djsjy_sm;
            item.djsjy_state = shitem.djsjy_sh_state;
            item.wth_shyj = shitem.wth_sm;
            item.wth_state = shitem.wth_sh_state;
            item.cyd_shyj = shitem.cyd_sm;
            item.cyd_state = shitem.cyd_sh_state;
            item.chzlyy_shyj = shitem.chzlyy_sm;
            item.chzlyy_state = shitem.chzlyy_sh_state;

            item.lj_shyj = shitem.lj_shyj;

            item.yj_shyj = shitem.yj_shyj;

            item.lj_state = shitem.lj_state;
            item.yj_state = shitem.yj_state;
          }
          if (model.yj_file_name !== null && model.yj_file_name !== '') {
            var yj_listnames = model.yj_file_name.split('|');
            var yj_listpaths = model.yj_file_path.split('|');
            if (yj_listnames.length == 4 && yj_listnames.length == 4) {
              for (var i = 0; i < yj_listnames.length; i++) {
                for (var j = 0; j < yj_listpaths.length; j++) {
                  if (i == j) {
                    var yj_list = {
                      name: yj_listnames[i],
                      url: yj_listpaths[j],
                    };
                    if (yj_list.url != null) {
                      item.yjjllist.push(yj_list);
                    }
                  }
                }
              }
            }
          }
          if (model.lj_file_name !== null && model.lj_file_name !== "") {
            var lj_listnames = model.lj_file_name.split('|');
            var lj_listpaths = model.lj_file_path.split('|');
            if (lj_listnames.length == 4 && lj_listnames.length == 4) {
              for (var i = 0; i < lj_listnames.length; i++) {
                for (var j = 0; j < lj_listpaths.length; j++) {
                  if (i == j) {
                    var lj_list = {
                      name: lj_listnames[i],
                      url: lj_listpaths[j],
                    };

                    if (lj_list.url != null) {
                      item.ljjllist.push(lj_list);
                    }
                  }
                }
              }
            }
          }

          if (model.yj_isys_dom == "1") {
            item.ychecked = true;
          }
          if (model.lj_isys_dom == "1") {
            item.lchecked = true;
          }
          item.yj_jcsjcgName = model.yj_jcsjcg_name;
          item.wydcjlName = model.wydcjl_name;
          item.wydcjlFileUrl = model.wydcjl;
          item.jjbgName = model.jjbg_name;
          item.jjbgFileUrl = model.jjbg;
          item.jccwwxgsmName = model.jccwwxgsm_name;
          item.jccwwxgsmFileUrl = model.jccwwxgsm;
          item.djsjyName = model.djsjy_name;
          item.djsjyFileUrl = model.djsjy;
          item.wthName = model.wth_name;
          item.wthFileUrl = model.wth;
          item.cydName = model.cyd_name;
          item.cydFileUrl = model.cyd;
          item.chzlyyName = model.chzlyy_name;
          item.chzlyyFileUrl = model.chzlyy;
        }
        if (shitem != null) {
        }
      }
    );
    return {
      handleClose,
      inited,
      vmodel,
      fmodel,
      footer,
      top,
      calcHeight,
      handleClick,
      contentHeight,
      activeName: "ssfa",
      item,
      shyj,
      dialogVisible, // 控制弹出框的显示与隐藏
      selectedDate, // 选择的日期
    };
  },
  mounted() { },
  methods: {

    getFileName(url) {
  const cleanUrl = url.replace(/\/+$/, '');
  const lastIndex = cleanUrl.lastIndexOf('/');
  return cleanUrl.substring(lastIndex + 1);

}
,
    async getShowPdf(t, fileurl,filename,idx) {
      if(filename==undefined||filename==""){
        filename= this.getFileName(fileurl);
      }

      var arrs = fileurl.split(',');
      if (arrs.length > 1) {
        fileurl = arrs[idx] + "";
      }
      const extension = fileurl.split('.').pop();
      if (extension === "pdf") {
        this.http
          .get("/api/zm_data_record_auditing/getfile?key=" + fileurl, "", true, {
            responseType: "blob",
          })
          .then((content) => {
            // 创建Blob对象
            const blob = new Blob([content]);
            // 创建下载链接
            const downloadLink = document.createElement('a');
            const url = URL.createObjectURL(blob);
            // 设置下载属性
            downloadLink.href = url;
            downloadLink.download = filename || 'document.pdf'; // 默认文件名
            // 触发下载
            document.body.appendChild(downloadLink);
            downloadLink.click();
            // 清理资源
            setTimeout(() => {
              document.body.removeChild(downloadLink);
              URL.revokeObjectURL(url);
            }, 100);
          });
      } else {
        window.open(fileurl);
      }
    },
  },
});
</script>

<style lang="less" scoped>
/* 为 el-drawer 的标题添加下划线 */

.dia-footer {
  text-align: right;
  width: 100%;
  border-top: 1px solid #e2e2e2;
  text-align: right;
  padding: 6px 8px;
}
</style>

<style scoped lang="less">
.vol-dialog ::v-deep(.el-drawer__body) {
  border-top: 1px solid var(--el-menu-border-color);
  padding-top: 10px;
}

.vol-dialog ::v-deep(.el-drawer__header) {
  margin-bottom: 15px !important;
}

.vol-dialog ::v-deep(.el-tabs__item) {
  padding: 0px 15px;
}

.vol-dialog ::v-deep(.el-tabs__item.is-active) {
  color: #000;
  font-weight: bold;
}

.vol-dialog ::v-deep(.el-dialog__header) {
  border-bottom: 1px solid #d0d0d0;
}

.edit_btn {
  min-height: 40px;
  min-width: 100px;
  background: #409eff 80%;
  border: #409eff;
  font-size: 20px;
}
</style>
